<template>
	<view class="adopt u-flex u-col-center" @click="hideMadal">
		<view class=" adopt-content">
			<scroll-view class="scoll-class" style="height: 100%;width: 100%;" scroll-y>
				<view style="height: 100%;width: 100%;" class="u-flex u-col-center u-row-between u-flex-wrap">
					<view v-for="(item,index) in list" :key="item.id" class="adopt-content-item">
						<view class="item u-flex u-flex-col" @click.stop.prevent>
							<view class="chicken-img"><image :src="item.activity_icon" :lazy-load="true" mode="widthFix"></image></view>
							<!-- <view class="item-desc">成功抢到肉鸡后平台 可以宰杀包邮寄送</view> -->
							<view class="item-desc">{{item.activity_introduce}}</view>
							<view class="item-btn" @click="showSendGroupMask(index)">{{item.activity_name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 发团弹窗 -->
		<u-mask :show="sendGroupMask" @click="hideSendGroupMask">
			<view class="send-group-madal" @click.stop>
				<image src="../../static/images/icon_close@2x.png" mode="" @click="hideSendGroupMask" class="close-icon"></image>
				<view class="u-font-32 color-999999 u-margin-top-26">
					<view class="">
						<view class="" @click.stop @click="groupListShow=true">
							<u-field v-model="groupTypeLable" label="开团类型" placeholder="请选择开团类型" :disabled="true" required></u-field>
						</view>
						<view class="" @click.stop>
							<u-field v-model="groupNumber" label="人数" placeholder="请填写开团人数,如:10" required></u-field>
						</view>
					</view>
				</view>
				<view class="u-flex u-col-center u-row-around u-margin-top-60" style="width: 100%;">
					<u-button :custom-style="customStyle2" hover-class="none" @click="hideSendGroupMask">取消</u-button>
					<u-button :custom-style="customStyle3" hover-class="none" @click="sendGroup">立即发团</u-button>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
export default {
	name: 'adopt',
	props:{
		chickenList:{
			type:Array,
			default(){
				return []
			}
		}
	},
	data() {
		return {
			list:[],
			groupTypeLable:"",
			groupNumber:"",
			groupType:"",
			sendGroupMask:false,
			customStyle2: {
				width: "200rpx",
				height: "70rpx",
				background: "rgba(189,189,189,1)",
				border: "4rpx solid rgba(149,149,149,1)",
				borderRadius: "20rpx",
			},
			customStyle3: {
				width: "200rpx",
				height: "70rpx",
				background: "rgba(245,179,64,1)",
				border: "4rpx solid rgba(204,126,43,1)",
				borderRadius: "20rpx",
				color: "#FFFFFF"
			}
		};
	},
	created() {
		this.list = this.chickenList
		console.log(this.chickenList)
	},
	methods: {
		hideMadal() {
			this.$emit('showChickenMadal');
		},
		showSendGroupMask(index){
			if(this.list[index].click_effect === "open"){
				this.sendGroupMask = true;
				this.groupTypeLable = this.list[index].name;
				this.groupType = this.list[index].id
				return false;
			}
			uni.navigateTo({
				url:"../../buychicken/index/index?tabindex="+index
			})
		},
		hideSendGroupMask(){
			this.sendGroupMask = false;
			this.groupNumber="";
			this.groupTypeLable=''
		},
		sendGroup() {
			let reg = /^[1-9]\d*$/
			if (this.groupType === "") {
				this.$u.toast("请选择开团类型！")
				return false
			}
			if (!reg.test(this.groupNumber) && Number(this.groupNumber)<2) {
				this.$u.toast("请输入大于2的整数")
				return false
			}
			uni.showLoading({
				mask: true
			})
			this.postSendGroup();
		},
		postSendGroup() {
			let params = {
				goods_id: this.groupType,
				num: this.groupNumber
			}
			this.$u.api.sendCollages(params).then(res => {
				uni.hideLoading()
				if (res.errno === "000") {
					this.$emit('showChickenMadal');
					this.$u.toast(res.errmsg)
					uni.navigateTo({
						url:"../../buychicken/goodsdetail/goodsdetail?goods_id="+res.result.data.id,
					})
				} else {
					this.$u.toast(res.errmsg)
				}
		
			}).catch(err => {
				console.log(err)
			})
		},
	},
	components: {
	}
};
</script>

<style >
.adopt {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 12;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	
}
.scoll-class{
	padding: 0 30rpx;
	box-sizing: border-box;
}
.adopt-content {
	width: 100%;
	/* height: ; */
	height: 65%;
	overflow-y: auto;
}
.adopt-content-item {
	width: 45%;
	margin-top: 70rpx;
}
.adopt-content .adopt-content-item:first-child {
	margin-top: 0;
}
.adopt-content .adopt-content-item:nth-child(2) {
	margin-top: 0;
}
.item {
	width: 100%;
	min-height: 400rpx;
	background: rgba(255, 255, 255, 1);
	border: 4rpx solid rgba(167, 92, 26, 1);
	border-radius: 20rpx;
	padding: 32rpx;
	box-sizing: border-box;
	position: relative;
}
.chicken-img {
	width: 106rpx;
	position: relative;
}
.chicken-img image {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 200;
}
.chicken-img::after {
	content: '';
	width: 106rpx;
	height: 38rpx;
	background:rgba(204,204,204,1);
	position: absolute;
	bottom: -10rpx;
	right:0;
	border-radius: 50%;
	/* box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.7); */
	/* transform: rotateZ(10deg); */
	transform-origin: bottom right;
	z-index: 0;
}
.item-desc {
	width: 100%;
	font-size: 28rpx;
	margin-top: 56rpx;
	text-align: center;
}
.item-btn {
	width: 240rpx;
	height: 70rpx;
	background: rgba(245, 179, 64, 1);
	border: 3rpx solid rgba(204, 126, 43, 1);
	border-radius: 20rpx;
	position: absolute;
	bottom: -35rpx;
	text-align: center;
	line-height: 70rpx;
	color: #ffffff;
}

.send-group-madal {
		width: 580rpx;
		height: 520rpx;
		background: rgba(255, 255, 255, 1);
		border: 4rpx solid rgba(167, 92, 26, 1);
		border-radius: 20rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		overflow: hidden;
		text-align: center;
		padding-top: 52rpx;
		box-sizing: border-box;
	}
	
	.close-icon {
		width: 148rpx;
		height: 140rpx;
		position: absolute;
		right: -68rpx;
		top: -60rpx;
	}
</style>
